<template>
  <el-table :data="tableData" :span-method="objectSpanMethod" height="100%" :header-cell-style="{color:'#4476a8'}">
    <el-table-column
      prop="area"
      label="十大知识领域"
      min-width="15%"
      align="center"
    />
    <el-table-column label="五大过程组" min-width="75%" align="center">
      <el-table-column
        prop="p_start"
        label="启动过程组"
        min-width="20%"
        align="center"
      />
      <el-table-column
        prop="p_plan"
        label="规划过程组"
        min-width="20%"
        align="center"
      />
      <el-table-column
        prop="p_execute"
        label="执行过程组"
        min-width="20%"
        align="center"
      />
      <el-table-column
        prop="p_monitor"
        label="监控过程组"
        min-width="20%"
        align="center"
      />
      <el-table-column
        prop="p_end"
        label="收尾过程组"
        min-width="20%"
        align="center"
      />
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'Outline',
  data() {
    return {
      spanAll: [],
      titleData: [
        {
          name: 'area'
        },
        {
          name: 'p_start'
        },
        {
          name: 'p_plan'
        },
        {
          name: 'p_execute'
        },
        {
          name: 'p_monitor'
        },
        {
          name: 'p_end'
        }
      ],
      tableData: [
        {
          area: '项目整合管理',
          p_start: '制定项目章程',
          p_plan: '制定项目管理计划',
          p_execute: '指导与管理项目工作',
          p_monitor: '监控项目工作',
          p_end: '结束项目或阶段'
        },
        {
          area: '项目整合管理',
          p_start: '制定项目章程',
          p_plan: '制定项目管理计划',
          p_execute: '管理项目知识',
          p_monitor: '实施整体变更控制',
          p_end: '结束项目或阶段'
        },
        {
          area: '项目范围管理',
          p_start: '',
          p_plan: '规划范围管理',
          p_execute: '',
          p_monitor: '确认范围',
          p_end: ''
        },
        {
          area: '项目范围管理',
          p_start: '',
          p_plan: '收集需求',
          p_execute: '',
          p_monitor: '确认范围',
          p_end: ''
        },
        {
          area: '项目范围管理',
          p_start: '',
          p_plan: '定义范围',
          p_execute: '',
          p_monitor: '控制范围',
          p_end: ''
        },
        {
          area: '项目范围管理',
          p_start: '',
          p_plan: '创建WBS',
          p_execute: '',
          p_monitor: '控制范围',
          p_end: ''
        },
        {
          area: '项目进度管理',
          p_start: '',
          p_plan: '规划进度管理',
          p_execute: '',
          p_monitor: '控制进度',
          p_end: ''
        },
        {
          area: '项目进度管理',
          p_start: '',
          p_plan: '定义活动',
          p_execute: '',
          p_monitor: '控制进度',
          p_end: ''
        },
        {
          area: '项目进度管理',
          p_start: '',
          p_plan: '排列活动顺序',
          p_execute: '',
          p_monitor: '控制进度',
          p_end: ''
        },
        {
          area: '项目进度管理',
          p_start: '',
          p_plan: '估算活动持续时间',
          p_execute: '',
          p_monitor: '控制进度',
          p_end: ''
        },
        {
          area: '项目进度管理',
          p_start: '',
          p_plan: '制定进度计划',
          p_execute: '',
          p_monitor: '控制进度',
          p_end: ''
        },
        {
          area: '项目成本管理',
          p_start: '',
          p_plan: '规划成本管理',
          p_execute: '',
          p_monitor: '控制成本',
          p_end: ''
        },
        {
          area: '项目成本管理',
          p_start: '',
          p_plan: '估算成本',
          p_execute: '',
          p_monitor: '控制成本',
          p_end: ''
        },
        {
          area: '项目成本管理',
          p_start: '',
          p_plan: '制定预算',
          p_execute: '',
          p_monitor: '控制成本',
          p_end: ''
        },
        {
          area: '项目质量管理',
          p_start: '',
          p_plan: '规划质量管理',
          p_execute: '管理质量',
          p_monitor: '控制质量',
          p_end: ''
        },
        {
          area: '项目资源管理',
          p_start: '',
          p_plan: '规划资源管理',
          p_execute: '获取资源',
          p_monitor: '控制资源',
          p_end: ''
        },
        {
          area: '项目资源管理',
          p_start: '',
          p_plan: '规划资源管理',
          p_execute: '建设团队',
          p_monitor: '控制资源',
          p_end: ''
        },
        {
          area: '项目资源管理',
          p_start: '',
          p_plan: '估算活动资源',
          p_execute: '管理团队',
          p_monitor: '控制资源',
          p_end: ''
        },
        {
          area: '项目沟通管理',
          p_start: '',
          p_plan: '规划沟通管理',
          p_execute: '管理沟通',
          p_monitor: '监督沟通',
          p_end: ''
        },
        {
          area: '项目风险管理',
          p_start: '',
          p_plan: '规划风险管理',
          p_execute: '实施风险应对',
          p_monitor: '监督风险',
          p_end: ''
        },
        {
          area: '项目风险管理',
          p_start: '',
          p_plan: '识别风险',
          p_execute: '实施风险应对',
          p_monitor: '监督风险',
          p_end: ''
        },
        {
          area: '项目风险管理',
          p_start: '',
          p_plan: '实施定性风险分析',
          p_execute: '实施风险应对',
          p_monitor: '监督风险',
          p_end: ''
        },
        {
          area: '项目风险管理',
          p_start: '',
          p_plan: '实施定量风险分析',
          p_execute: '实施风险应对',
          p_monitor: '监督风险',
          p_end: ''
        },
        {
          area: '项目风险管理',
          p_start: '',
          p_plan: '规划风险应对',
          p_execute: '实施风险应对',
          p_monitor: '监督风险',
          p_end: ''
        },
        {
          area: '项目采购管理',
          p_start: '',
          p_plan: '规划采购管理',
          p_execute: '实施采购',
          p_monitor: '控制采购',
          p_end: ''
        },
        {
          area: '项目相关方管理',
          p_start: '识别相关方',
          p_plan: '规划相关方参与',
          p_execute: '管理相关方参与',
          p_monitor: '监督相关方参与',
          p_end: ''
        }
      ]
    }
  },
  created() {
    this.titleData.forEach((val) => {
      this.getSpanNum(val.name)
    })
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 得到行合并的数据
      const rowNum = this.spanAll[columnIndex][rowIndex]
      // 列合并
      const colNum = rowNum > 0 ? 1 : 0
      // 当前位置的行合并和列合并数据
      return {
        rowspan: rowNum,
        colspan: colNum
      }
    },
    getSpanNum(curName) {
      const data = this.tableData
      const spanArry = []
      let pos = 0
      data.forEach((val, i) => {
        if (i === 0) {
          spanArry.push(1)
          pos = 0
        } else {
          // 判断当前列数据与下一行的该列数据是否相同
          if (data[i][curName] === data[i - 1][curName]) {
            // 每一列每一行的合并数量
            spanArry[pos] += 1
            spanArry.push(0)
          } else {
            spanArry.push(1)
            pos = i
          }
        }
      })
      // 把合并数据放入spanAll里面
      this.spanAll.push(spanArry)
    }
  }
}
</script>

<style >
.el-table {
  padding: 2px;
  height: 100%;
  width: 100%;
}
</style>
